<template>
	<view class="swiper-page">
		<view class="bg_img_view">
			<image
				class="bg_img"
				v-for="(item,index) in bannerListval"
				:key="index"
				:src="item.imageUrlList[0]" 
				:style="{ zIndex : index === current ? '9' : '1' }"
				:class="{ 'fadein' : index === current }"
			/>
		</view>
		<swiper
			class="swiper"
			id="swiper"
			:indicator-dots="false"
			:autoplay="true"
			:interval="5000"
			:duration="500"
			indicator-active-color="#5ca9b7"
			circular
			@change="onChange"
			@animationfinish="onAnimationfinish"
			@transition="onTransition"
		>
			<swiper-item v-for="(item,index) in bannerListval" :key="index">
				<view class="swiper-item">
					<image class="image" :style="{ top : `${top}px`, left: `${left}px` }" :src="item.imageUrlList[1]" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<image  class="mask-swiper" src="https://oss.jtmckj.com/supplyH5/swiper-mask.png" mode=""></image>
	</view>
</template>

<script setup>
	import { computed, getCurrentInstance, onMounted, reactive, ref } from 'vue';
		import { unreadqty,carouselList } from '@/api/home.js';
	
	import { useThrottle } from '../../hooks';
	const { proxy } = getCurrentInstance()

	
	const bannerListval = ref([])
	//获取轮播图
	const getbannerList = async () => {
		const res = await carouselList(1)
		bannerListval.value = res
		if(bannerListval.value.length < 1) {
			bannerListval.value = [{
				imageUrlList:['https://oss.jtmckj.com/Supply/Carousel/20240930/b3cd31a1088249c1bdfaa1b53474639a.png','https://oss.jtmckj.com/Supply/Carousel/20240930/d0bfda0b2ae24146adc4e4670ff49a3d.png']
			}]
		}
	}
	
	getbannerList()
	
	
	// const list = reactive([{
	// 	   bigsrc:'https://oss.jtmckj.com/supplyH5/swiper-big.png',
	// 	   minsrc:'https://oss.jtmckj.com/supplyH5/swiper-min.png',
	// },{
	// 	   bigsrc:'https://oss.jtmckj.com/supplyH5/swiper-big2.png',
	// 	   minsrc:'https://oss.jtmckj.com/supplyH5/swiper-min2.png'
	// }
	// ])
	
	const top = ref(0)
	const left = ref(0)
	const width = ref(0)
	const query = uni.createSelectorQuery().in(proxy);
	onMounted(() => {
		query.select('#swiper').boundingClientRect(data => {
		  // console.log("得到布局位置信息" + JSON.stringify(data));
		  // console.log("节点离页面顶部的距离为" + data.top);
		  top.value = data.top * -1
		  left.value = data.left * -1
		  width.value = data.width
		}).exec()
	})
	const current = ref(0)
	const bgImg = computed(() => {
		return bannerListval[current.value].src
	})
	const onAnimationfinish = (e) => {
		current.value = e.detail.current
		isRightScorll.value = false
		isLeftScorll.value = false
	}
	const onChange = () => {
		// console.log('变换了')
	}
	const isRightScorll = ref(false)
	const isLeftScorll = ref(false)
	const isShow = ref(true)
	const onTransition = useThrottle((e) => {
		if (e.detail.dx >= width.value * 0.5 && !isRightScorll.value) {
			startAni()
			if (current.value === bannerListval.length - 1) {
				current.value = 0
			} else {
				current.value++
			}
			isRightScorll.value = true
			isLeftScorll.value = false
		}
		if (e.detail.dx < width.value * 0.5 && isRightScorll.value) {
			startAni()
			if (current.value === 0) {
				current.value = bannerListval.length - 1
			} else {
				current.value--
			}
			isRightScorll.value = false
			isLeftScorll.value = false
		}
		if (e.detail.dx <= width.value * -0.5 && !isLeftScorll.value) {
			startAni()
			if (current.value === 0) {
				current.value = bannerListval.length - 1
			} else {
				current.value--
			}
			isLeftScorll.value = true
			isRightScorll.value = false
		}
		if (e.detail.dx > width.value * -0.5 && isLeftScorll.value) {
			startAni()
			if (current.value === bannerListval.length - 1) {
				current.value = 0
			} else {
				current.value++
			}
			isLeftScorll.value = false
			isRightScorll.value = false
		}
	}, 200)
	
	const opacity = ref(1)
	const startAni = () => {
		opacity.value = 0.3
		setTimeout(() => {
			opacity.value = 1
		}, 80)
	}
	const styles = {
		'width': '100vw',
		'height': '500rpx',
		'position': 'absolute',
		'inset': 0,
		'z-index': 1,
	}
	
	const dotsStyles = reactive({
		height: 2,
		backgroundColor: 'rgba(92, 169, 183, .3)',
		border: '1px rgba(92, 169, 183, .3) solid',
		color: '#fff',
		selectedBackgroundColor: 'rgba(92, 169, 183, .9)',
		selectedBorder: '1px rgba(92, 169, 183, .9) solid'
	})
</script>

<script>
	export default { name:"IndexSwiper" }
</script>

<style lang="scss">
.swiper-page {
	width: 100%;
	height: 580rpx;
	display: flex;
	justify-content: center;
	background-size: cover;
	position: relative;
	.mask-swiper {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 28; /* 背景图在轮播图下方 */
	}
	.bg_img {
		width: 100%;
		height: 580rpx;
		position: absolute;
		inset: 0;
		z-index: 1;
		opacity: 0;
		// opacity: v-bind('opacity');
		// transition: opacity 0.1s;
	}
	.fadein {
		-webkit-transition: all 0.2s;
		-moz-transition: all 0.2s;
		-ms-transition: all 0.2s;
		-o-transition: all 0.2s;
		transition: all 0.2s;
		opacity: 1 !important;
	}
	.swiper {
		margin-top: 136px;
		width: 100%;
		height: 580rpx;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
		z-index: 118;
		.swiper-item {
			width: 100%;
			height: 580rpx;
			overflow: hidden;
			border-radius: 20rpx;
			position: relative;
			z-index: 44;
			.image {
				width: 100%;
				height: 580rpx;
				position: absolute;
				z-index: 35;
			}
		}
	}
}

</style>